<template>
	<view class="container">
		<view class="tui-page__hd">
			<view class="tui-page__title">Flex</view>
			<view class="tui-page__desc">Flex布局</view>
		</view>
		<view class="tui-page__bd  tui-page__spacing">
			<view class="thorui-flex">
				<view class="thorui-flex__item">
					<view class="tui-flex__item">https://www.thorui.cn/</view>
				</view>
			</view>
			<view class="thorui-flex">
				<view class="thorui-flex__item">
					<view class="tui-flex__item">thor</view>
				</view>
				<view class="thorui-flex__item">
					<view class="tui-flex__item">thor</view>
				</view>
			</view>
			<view class="thorui-flex">
				<view class="thorui-flex__item">
					<view class="tui-flex__item">thor</view>
				</view>
				<view class="thorui-flex__item">
					<view class="tui-flex__item">thor</view>
				</view>
				<view class="thorui-flex__item">
					<view class="tui-flex__item">thor</view>
				</view>
			</view>
			<view class="thorui-flex">
				<view class="thorui-flex__item">
					<view class="tui-flex__item">thor</view>
				</view>
				<view class="thorui-flex__item">
					<view class="tui-flex__item">thor</view>
				</view>
				<view class="thorui-flex__item">
					<view class="tui-flex__item">thor</view>
				</view>
				<view class="thorui-flex__item">
					<view class="tui-flex__item">thor</view>
				</view>
			</view>
			<view class="thorui-flex">
				<view class="tui-flex__item">thor</view>
				<view class="thorui-flex__item">
					<view class="tui-flex__item">thor</view>
				</view>
				<view class="tui-flex__item">thor</view>
			</view>
			<view class="tui-section__title">
				<text>flex-direction: row\n横向布局</text>
			</view>
			<view class="thorui-flex__center">
				<view class="tui-item__row tui-color__primary">thorui</view>
				<view class="tui-item__row tui-color__green">thorui</view>
				<view class="tui-item__row tui-color__white">thorui</view>
			</view>
			<view class="tui-section__title">
				<text>flex-direction: column\n纵向布局</text>
			</view>
			<view class="thorui-flex  thorui-flex__column">
				<view class="flex-item__column tui-color__primary">thorui</view>
				<view class="flex-item__column tui-color__green">thorui</view>
				<view class="flex-item__column tui-color__white">thorui</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	.tui-flex__item {
		margin: 5px;
		padding: 0 10px;
		text-align: center;
		height: 2.3em;
		line-height: 2.3em;
		background-color: #fff;
		color: #999;
	}

	.tui-item__row {
		width: 200rpx;
		height: 300rpx;
		font-size: 26rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.flex-item__column {
		margin: 0 auto;
		width: 300rpx;
		height: 200rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-color__primary {
		background-color: #5677fc;
	}

	.tui-color__green {
		background-color: #07c160;
	}

	.tui-color__white {
		background-color: #fff;
		color: #000000;
	}
</style>
